<template>
<div class="aaa" v-show="this.tijiao">
   <div class="card">
        <div class="a">确认要离开收银台？</div>
        <div class="aa">请尽快完成支付，否则将被取消</div>
        <div class="bottom">
            <div class="no">取消订单</div>
            <div class="yes" @click="pay1">确认支付</div>
        </div>
   </div>
</div>
</template>
<script>
import {mapState,mapGetters,mapMutations} from 'vuex'
    export default{
        data(){
            return{
                
            }
        },
        computed:{
            ...mapState(['pays','tijiao'])
        },
        methods:{
             pay1(){
                this.$store.state.tijiao=false;
                this.$store.state.pays=true;
            }
        }
    }
</script>
<style lang="scss" scoped>
.aaa{
        background-color: rgb(0,0,0,0.5);
        height: 100vh;
        width: 100vw;
        position:absolute;
}
    .card{
        width: 84vw;
        background-color:white;
        border-radius: 1.5vw;
        margin:0 auto;
        margin-top:37.5vh;
    }
    .a{
        font-size: 5.5vw;
        text-align: center;
        padding-top: 5vw;
    }
    .aa{
        color:#ccc;
        text-align:center;
        margin: 3vw 0;
    }
    .bottom{
        display:flex;
        margin-top: 5vw;
        padding-bottom: 5vw;

    }
    .yes{
        border:0.1vw solid #1296db;
        background-color:#1296db;
        border-radius:5vw;
        color:white;
         width: 21vw;
        text-align: center;
        padding: 2vw;
    }
     .no{
        border: 0.1vw solid #1296db;
        color: #1296db;
        border-radius: 5vw;
        width: 21vw;
        text-align: center;
        padding: 2vw;
        margin-left: 12vw;
        margin-right: 7vw;
    }
</style>